<template>
	<view class="animal_home">

		<view class="home_header">
			<view class="home_header_img" @click="jumpGo">
				<image v-if="userInfo.img" :src="userInfo.img" mode=""></image>

				<text v-if="!userInfo.img" class="loginGo">+</text>
			</view>
			<view class="home_header_name">
				{{userInfo.nick_name}}
			</view>
		</view>
		<view class="home_main">
			<view class="home_main_list">

				<view class="home_main_tab" @click="msgGo">
					<image src="/static/xg.png" mode=""></image>
					<text>修改信息</text>
				</view>

				<view class="home_main_tab" @click="colGo">
					<image src="/static/sc.png" mode=""></image>
					<text>收藏记录</text>
				</view>
				<view class="home_main_tab" @click="webGo">
					<image src="/static/ll.png" mode=""></image>
					<text>浏览记录</text>
				</view>
				<view class="home_main_tab" v-if="loginFlat" @click="down">
					<image src="/static/tc.png" mode=""></image>
					<text>退出登录</text>
				</view>
			</view>
		</view>
		<view-tabbar :idx="'3'"></view-tabbar>

	</view>
</template>

<script>
	import Tabbar from '@/components/tabbar.vue'
	import {
		userDesc
	} from "../../api/index.js"
	export default {
		data() {
			return {
				uid: "",
				userInfo: {},
				loginFlat: false
			};
		},
		components: {
			'view-tabbar': Tabbar
		},
		methods: {
			jumpGo() {
				if (this.loginFlat) {
					return
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			colGo() {
				if (this.loginFlat) {
					uni.switchTab({
						url: "/pages/collect/collect"
					})
				} else {
					uni.showToast({
						title: "请先登录!",
						icon: "error"
					})
				}

			},
			webGo() {
				if (this.loginFlat) {
					uni.navigateTo({
						url: "/pages/web/web"
					})
				} else {
					uni.showToast({
						title: "请先登录!",
						icon: "error"
					})
				}

			},
			msgGo() {
				if (this.loginFlat) {
					uni.navigateTo({
						url: "/pages/userMsg/userMsg"
					})
				} else {
					uni.showToast({
						title: "请先登录!",
						icon: "error"
					})
				}
			},
			down() {
				uni.removeStorageSync("uid")
				this.loginFlat = false;
				this.userInfo = {}
				uni.showToast({
					title: "退出成功"
				})
			},
			async getUser(id) {
				await userDesc(id).then((content) => {
					console.log(content)
					let {
						data: {
							data,
							code
						}
					} = content
					if (code == 200) {
						this.userInfo = data[0]
					}
					uni.hideLoading()
				})
			}
		},
		async onShow() {

			uni.hideTabBar({
				animation: false
			});

			if (uni.getStorageSync("uid")) {
				uni.showLoading({
					title: "加载中...",

				})
				this.uid = uni.getStorageSync("uid")
				this.loginFlat = true
				await this.getUser(this.uid)

			} else {
				this.loginFlat = false
			}
		},
	}
</script>

<style lang="scss">
	.loginGo {
		display: block;
		font-size: 36px;
		color: #a1b275;
		text-align: center;
		line-height: 70px;
		background-color: #f3f2f2;
		width: 100%;
		height: 100%;
	}

	.animal_home {
		height: 100vh;
		background-color: #a1b275;

		.home_header {
			height: 118px;
			padding-top: 30px;
			width: 100%;

			.home_header_img {
				height: 80px;
				width: 80px;
				background-color: white;
				margin: 0 auto;
				border-radius: 15px;
				border: 2px solid white;
				box-sizing: border-box;
				margin-bottom: 4px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.home_header_name {
				margin: 0 auto;
				text-align: center;
				color: rgba(255, 255, 255, 0.86);
				font-size: 18px;
			}
		}

		.home_main {
			height: 500px;
			background-color: #f3f2f2;
			border-radius: 43px 43px 0 0;
			overflow: hidden;

			.home_main_list {
				transform: translateY(30px);
				width: 344px;
				margin: 0 auto;
				height: 250px;

				.home_main_tab {
					display: flex;
					color: #3f4f3a;
					padding: 10px 10px;
					line-height: 30px;
					align-items: center;

					image {
						height: 30px;
						width: 30px;
					}

					text {
						margin-left: 10px;
					}
				}
			}
		}
	}
</style>